<script setup lang="ts">
import { DRMethod } from '@/types/visualization/enum'

import { defineProps, defineModel } from 'vue'

import ControlPanel from '../base/ControlPanel.vue'

const dr_method = defineModel('dr_method')
const status = defineModel('status')
const size = defineModel('size')
const show_axis = defineModel('show_axis')

defineProps({
  handle_reset_zoom: Function,
  draw_graph: Function,
  calculate_then_draw: Function,
  handle_change_circle_size: Function,
})
</script>

<template>
  <ControlPanel>
    <t-form-item label="降维算法">
      <t-radio-group
        variant="default-filled"
        v-model="dr_method"
        :disabled="status.loading"
      >
        <t-radio-button :value="DRMethod.PCA">
          {{ DRMethod.PCA }}
        </t-radio-button>
        <t-radio-button :value="DRMethod.UMAP">
          {{ DRMethod.UMAP }}
        </t-radio-button>
        <t-radio-button v-show="true === false" :value="DRMethod.TSNE">
          {{ DRMethod.TSNE }}
        </t-radio-button>
      </t-radio-group>
    </t-form-item>

    <t-form-item label="画布">
      <t-space class="btn-group">
        <t-button @click="handle_reset_zoom" :disabled="status.loading">
          恢复缩放
        </t-button>
        <t-button @click="draw_graph" theme="danger">重建渲染</t-button>
        <t-button @click="calculate_then_draw" theme="danger">
          重新计算并渲染
        </t-button>
      </t-space>
    </t-form-item>

    <t-form-item label="坐标轴">
      <t-switch
        size="large"
        v-model="show_axis"
        @change="draw_graph"
      ></t-switch>
    </t-form-item>

    <t-form-item label="大小">
      <t-slider
        v-model="size.circle"
        :min="0"
        :max="7"
        :step="0.2"
        :onChange="handle_change_circle_size"
      />
    </t-form-item>
  </ControlPanel>
</template>

<style scoped>
.btn-group {
  flex-wrap: wrap;
}
</style>
